<template>
  <div>

    <el-tabs v-model="active">
      <el-tab-pane label="组件属性" name="first">

        <div v-for="(col,index) in store.current.columns" :key="index">

          <el-row>
            <el-col :span="6">
              <div class="prop-set-title">
                字段
              </div>
            </el-col>
            <el-col :span="18">
              <el-input v-model="col.name" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="6">
              <div class="prop-set-title">
                标签名
              </div>
            </el-col>
            <el-col :span="18">
              <el-input v-model="col.label" placeholder="请输入内容"></el-input>
            </el-col>
          </el-row>

          <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>

        </div>
        <div style="margin-left: 22px;">
          <el-button type="text" @click="handleAddColumn">增加一列</el-button>
        </div>

      </el-tab-pane>
      <el-tab-pane label="容器属性" name="second">

        <div class="box-model-config">
          <div class="title">内填充</div>
          <div class="configuration">

            <el-row>

              <el-col :span="4">
                <div class="prop-set-title">
                  上
                </div>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="store.current.boxModelStyle.paddingTop"></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{store.current.boxModelStyle.paddingTop+'px'}}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">
                  右
                </div>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="store.current.boxModelStyle.paddingRight"></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{store.current.boxModelStyle.paddingRight+'px'}}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">
                  下
                </div>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="store.current.boxModelStyle.paddingBottom"></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{store.current.boxModelStyle.paddingBottom+'px'}}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">
                  左
                </div>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="store.current.boxModelStyle.paddingLeft"></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{store.current.boxModelStyle.paddingLeft+'px'}}
                </div>
              </el-col>
            </el-row>

          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  export default {
    inject: ['getStore'],
    data () {
      return {
        active: 'first',
      }
    },
    methods: {
      random () {
        let len = 8;
        let $chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz";
        let maxPos = $chars.length;
        let id = "";
        for (let i = 0; i < len; i++) {
          id += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return id;
      },
      handleOptionsRemove (index) {
        this.store.current.columns.splice(index, 1)

      },
      handleAddColumn () {
        this.store.current.columns.push({
          label: '标签页' + (parseInt(this.store.current.columns.length) + 1),
          name: this.random(),
          list: []
        })
      }
    },
    computed: {
      store () {
        return this.getStore()
      }
    }
  }
</script>

<style scoped>
.tab {
  margin-bottom: 20px;
}
.tab > div {
  display: flex;
}
.tab > div > span {
  width: 100px;
}

.box-model-config {
  padding-left: 10px;
}
.box-model-config .title {
  line-height: 32px;
  font-size: 14px;
}
.box-model-config .el-input-number {
  line-height: 30px;
}
>>> .el-tabs__item[aria-controls] {
  width: 50% !important;
  text-align: center;
}
</style>